{#
  This is run for every top-level API namespace, e.g., for "chrome.accessibilityFeatures".
#}

{% extends "layouts/base.njk" %}


{% block css %}
{% InlineCss '/css/main.css' %}
{% endblock %}

{% block title_bar %}
  {% include 'partials/breadcrumbs.njk' %}
{% endblock %}

{% import 'macros/render-type.njk' as macros with context %}

{# Update "content" with additional headings and so forth, so we can pass it
   through the toc filter. #}
{% set content %}
  <div class="type stack">
    {{ content | safe }}
  </div>

  <h2 class="type--h3">Summary</h2>
  <ul class="code-sections code-sections--summary flow-space-300 stack">
    {% for group in namespace.groups %}
      {{ macros.renderGroupSummary(group) }}
    {% endfor %}
  </ul>

  {% for group in namespace.groups %}
   {{ macros.renderGroupAll(group) }}
  {% endfor %}

{% endset %}

{% set tocContents %}
  {{- content | toc | safe -}}
{% endset %}

{% block content %}
  <div class="display-flex gap-top-300 lg:gap-top-400">
    {% include 'partials/navigation-tree.njk' %}
    {% set f = namespace.root._feature %}

    {# The article is wrapped again so that the ToC aligns on its right on desktop #}
    <div class="display-flex justify-content-center width-full">
      <article class="stack measure-long width-full pad-left-400 pad-right-400">
        <h1 class="type--h2">{{ title }}</h1>

        {% if f.platformAppsOnly %}
          <div class="aside aside--warning">
            This API is part of the Chrome Apps platform, which was deprecated in 2020.
            It remains supported for Enterprise and Education customers on ChromeOS until at least Jan 2025.
            Learn more about <a href="/docs/apps/migration">migrating your app</a>.
          </div>
        {% endif %}

        {% if f.chromeOsOnly %}
          {# There are some historic cases of multi-platform support in Platform Apps, but
              the only restriction these days is CrOS vs everywhere. #}
          <div class="aside aside--note">
            <strong>Important:</strong> This API works <strong>only on ChromeOS</strong>
          </div>
        {% endif %}

        <div>{# This div prevents flow-space-300 from applying to the parent stack. #}
          <ul class="code-sections code-sections--summary flow-space-300 stack">
            {% set commentHtml %}{{ macros.renderCommentText(namespace.root) | trim }}{% endset %}
            {% if commentHtml %}
              <li>
                <div class="code-sections__label">Description</div>
                <div class="type">
                  {{ commentHtml | safe }}
                </div>
              </li>
            {% endif %}

            {% if f.permissions.length %}
              <li>
                <div class="code-sections__label">Permissions</div>
                <div>
                  {% for permission in f.permissions %}
                    <code>{{ permission }}</code><br />
                  {% endfor %}
                  {{ extra_permissions_html | safe }}
                  {{ has_warning | safe }}
                </div>
              </li>
            {% endif %}

            {% if f.manifestKeys.length %}
              <li>
                <div class="code-sections__label">Manifest Keys</div>
                <div>
                  <p>The following keys must be declared <a href="/docs/extensions/mv3/manifest/">in the manifest</a> to use this API.</p>
                  {% for manifestKey in f.manifestKeys %}
                    <code>{{ manifestKey }}</code><br />
                  {% endfor %}
                </div>
              </li>
            {% endif %}

            {% set availabilityHtml %}{{ macros.renderAvailability(namespace.root) | trim }}{% endset %}
            {% if availabilityHtml %}
              <li class="lg:align-center">
                <div class="code-sections__label">Availability</div>
                {{ availabilityHtml | safe }}
              </li>
            {% endif %}

          </ul>
        </div>

        {% include 'partials/toc-inner.njk' %}
        {% if namespace.reference %}
            <a href={{namespace.reference}}>Review the guide for <code>{{ title }}</code>.</a>
          {% endif %}
        {{ content | safe }}
      </article>

      {% include 'partials/toc-side.njk' %}
    </div>
  </div>
{% endblock %}
